<script setup>
const route = useRoute();
const router = useRouter();
let loginStatus = ref(false);
let hasFocus = ref(false);
const menulist = reactive([
    {
        path: '/',
        name: 'home',
    },
    {
        path: '/wd',
        name: 'question',
    },
    {
        path: '/zx',
        name: 'message',
    },
    {
        path: '',
        name: 'analyze',
    }
])

const userMenuList = reactive([
    {
        path: '/',
        name: 'user',
    },
    {
        path: '/',
        name: 'message',
    },
    {
        path: '/',
        name: 'user_edit',
    },
    {
        path: '/',
        name: 'user_edit_pwd',
    }
])

// 退出账号无路径

const ChangeLoginStatus = () => {
    loginStatus.value = !loginStatus.value
}

const toUrl = (path) => {
    router.push(path)
}

const { locale, setLocale } = useI18n()

const handleFocus = (e) => {
    hasFocus.value = true;
}

const handleBlur = (e) => {
    hasFocus.value = false;
}

const handleSearch = () =>{
    toUrl('/wd')
}

</script>

<template>
    <div class="fixed top-0 left-0 z-10 h-[80px] leading-[80px] w-full bg-white figma_shadow">
        <div class="container h-[80px] m-auto relative flex ">
            <img src="/svg/logo.svg" alt="" class=" absolute top-[50%] translate-y-[-50%] left-0">
            <ul class="flex ml-[140px] w-[280px] justify-between font-medium text-theme">
                <li v-for="menu in menulist" :key="menu" class="click text-[#848E9C]" @click="toUrl(menu.path)">
                    <span class="relative" :class="route.path == menu.path ? 'menu-active' : ''">
                        {{ $t(menu.name) }}
                    </span>
                </li>
            </ul>
            <div class="absolute right-0 flex">
                <div class="search relative w-[390px] ml-[106px]">
                    <input @focus="handleFocus" @blur="handleBlur" type="text" :placeholder="$t('holder')"
                        class=" w-full h-[38px] pl-[35px] outline-none rounded-[23px] bg-[#F6F6F6]"
                        style="border: 1px solid #F0F0F2;">
                            <img  src="/svg/search.svg" alt=""
                                class="absolute top-[50%] translate-y-[-50%] left-[15px]">
                            <transition name="fade">
                                <div v-if="hasFocus"
                                    @click="handleSearch"
                                    class="search-btn w-[60px] h-[30px] rounded-[26px] bg-theme center-flex absolute top-[50%] translate-y-[-50%] right-[10px] click">
                                    <img src="/svg/search-white.svg" class="text-[#fff]" alt="">
                                </div>
                            </transition>
                </div>
                <div v-if="loginStatus" class="login-before ml-[120px] w-[160px] center-flex">
                    <div class="click" @click="ChangeLoginStatus">
                        {{ $t('login') }}
                    </div>
                    <div
                        class="ml-7 h-[32px] leading-[32px] rounded-[26px] px-5 bg-theme text-[#fff] text-center click">
                        {{ $t('signin') }}
                    </div>
                </div>
                <div v-else class="login-after flex">
                    <div class="icons w-[22px] ml-[40px] center-flex">
                        <div class="w-7 h-7 scale-125 click" @click="ChangeLoginStatus">
                            <img src="/svg/notice.svg" class="text-[#fff]" alt="">
                        </div>
                    </div>
                    <div class="user-icons w-[40px] ml-[40px] center-flex">
                        <div class="w-7 h-7 click">
                            <img src="https://picx.zhimg.com/v2-1fa485a92594fb75a8a5127adf2a9942_l.jpg?source=1def8aca" class="rounded-full" alt="">
                        </div>
                    </div>
                    <div class="ml-1 text-theme font-medium">
                        hello,{{ $t('name') }}
                    </div>
                </div>
                <div class="i18n ml-[40px] center-flex">
                    <div class="click">
                        <span v-show="locale == 'en'" @click="setLocale('zh')">
                            {{ $t('chinese') }}
                        </span>
                        <span v-show="locale == 'zh'" @click="setLocale('en')">
                            {{ $t('english') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.figma_shadow {
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.08);
}

.menu-active {
    color: #121315 !important;
    font-weight: 600 !important;
}

.menu-active:before {
    position: absolute;
    content: '';
    display: inline-block;
    width: 10px;
    height: 3px;
    border-radius: 1px;
    background-color: #121315;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>